<template>
    <div>
        <h3>参考：https://www.kancloud.cn/liuwave/quill/1409423</h3>
        <quill-editor
                class="quill-editor"
                ref="myQuillEditor"
                v-model="content"
                :options="editorOption"
                @blur="onEditorBlur"
                @focus="onEditorFocus"
                @change="onEditorChange">
        </quill-editor>

        <button type="button" class="btn" @click="submit">提交</button>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor';

    export default {
        name: "MyQuillEditor",
        components : {
            quillEditor
        },
        data() {
            return {
                content: ``, //双向数据绑定数据
                editorOption: {  //编辑器配置项
                    modules:{
                        toolbar: [
                            ['bold', 'underline','italic',  'strike'], //加粗，斜体，下划线，删除线
                            ['blockquote', 'code-block'], //引用，代码块
                            [{'list': 'ordered'}, {'list': 'bullet'}], //有序，无序列表
                            [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
                            [{'script': 'sub'}, {'script': 'super'}], // 上下标
                            [{'indent': '-1'}, {'indent': '+1'}], // 缩进
                            [{'direction': 'rtl'}], // 文本方向
                            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                            [{'header': [1, 2, 3, 4, 5, 6]}], //几级标题
                            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
                            [{'font': []}], //字体
                            [{'align': []}], //对齐方式
                            ['clean'], //清除字体样式
                            ['image', 'video'] //上传图片、上传视频
                        ]
                    },
                    placeholder: "输入内容..."
                },
            }
        },
        methods: {
            onEditorBlur(e) { // 失去焦点触发事件
                // console.log("blur",e)
            },
            onEditorFocus(e) { // 获得焦点触发事件
                // console.log("focus",e)
            },
            onEditorChange(e) { // 内容改变触发事件
                // console.log("change",e)
            },
            submit(){
                console.log(this.content);
            }
        }
    }
</script>

<style scoped>
</style>